/* 查询用户购物车中的商品 接口

                接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
                接口请求方式：get
                接口参数：
                    id  用户id

                使用方式
                    获取id为1的用户的购物车
                    http://jx.xuzhixiang.top/ap/api/cart-list.php?id=1

                服务器返回json数据 */

loadCartList();
// 1-购物车列表
async function loadCartList() {
  let uid = localStorage.getItem("uid");
  let { data } = await axios.get(CartListAPI, { params: { id: uid } });
  /*   console.log(data); */
  //   onclick=delFn(${v.pid}) 把删除的id 传了过来
  //  onclick后面添加 this ，是指按钮本身
  //  data-pid="${v.pid}   自定义属性
  let resArr = data.data.map(
    (v) =>
      `
    <ul class="nums">
        <li><input type="checkbox" onclick="countFn()" class="single-ipt"></li>
        <li class="d2"><img src="${v.pimg}" alt=""></li>
        <li><h2>${v.pname}</h2></li>
        <li class="d3"><p class="pprice-p">${v.pprice}</p></li>
        <li class="d4">
        <button onclick="subFn(${v.pid},this)">-</button>
        <input type="text" value="${v.pnum}" class="pnum-ipt">
        <button class="cart-add-btn" data-pid="${v.pid}">+</button>
        </li>
        <li class="d5"><button onclick="delFn(${v.pid},this)">删除</button></li>
              
    </ul>  
    `
  );
  let CartWebC = document.querySelector(".cart-web-c");
  //    加按钮的点击事件
  //本句代码执行完毕 以后 ListUl才有了内容 (请求是异步的 ul中数据是最后才有的)
  CartWebC.innerHTML = resArr.join("");
  // console.log(CartWebC.innerHTML);
  /*   console.log(11111); */

  //  cart-add-btn  获取加入购物车按钮
  let cartAddBtns = document.querySelectorAll(".cart-add-btn");
  console.log(cartAddBtns);
  //在这里添加点击事件
  for (let i = 0; i < cartAddBtns.length; i++) {
    cartAddBtns[i].onclick = async function () {
      /* console.log(this);
      console.log(this.previousElementSibling); */ //上一个元素
      let ipt = this.previousElementSibling;
      //先请求，后再加1
      let pnum = parseInt(ipt.value) + 1;

      let uid = localStorage.getItem("uid");

      //获取自定义属性
      let pid = this.getAttribute("data-pid");
      let params = { uid, pid, pnum };
      try {
        let { data } = await axios.get(CartUpdateAPI, { params });
        /*       console.log(data); */
        //获取输入框原来的值  加1
        ipt.value = pnum;
        countFn();
      } catch (error) {
        alert("网络错误，请检查网络");
      }
    };
  }
}
//  cart-add-btn  获取加入购物车按钮，获取不到 ？
let cartAddBtns = document.querySelectorAll("cart-add-btn");
console.log(cartAddBtns);

//减按钮的点击事件
async function subFn(pid, btn) {
  /* console.log(pid);
  console.log(this);
  console.log(btn); */ //这个btn 是指被点击的 btn
  let ipt = btn.nextElementSibling;
  //如果  输入框  的值  为1，不会执行下面的代码
  if (parseInt(ipt.value) == 1) {
  } else {
    ipt.value = parseInt(ipt.value) - 1;
    //CartUpdateAPI 调用接口
    let uid = localStorage.getItem("uid");
    let pnum = ipt.value;
    let params = { uid, pid, pnum };
    axios.get(CartUpdateAPI, { params });
    let { data } = await axios.get(CartUpdateAPI, { params });
    console.log(data);
    countFn();
  }
}

//拿到id ,调用删除接口 CartDeleteAPI
async function delFn(pid, btn) {
  console.log(pid);
  //调用删除接口
  let uid = localStorage.getItem("uid");
  let { data } = await axios.get(CartDeleteAPI, { params: { uid, pid } });
  /*   console.log(data); */
  
  
  //调用loadCartList()
  //删除父元素
  btn.parentNode.parentNode.remove();
  countFn();
  location.reload();
}

// 单选事件
function singleChange() {
  console.log(111);
  //计算总价
  //获取所有单选框

  countFn();

  //判断一下是否所有的单选框的 checked 属性都是 true
  //都是true  让 allIpt 的 checked 也变为 true
  let singleIpts = document.querySelectorAll(".single-ipt");
  /*   console.log(singleIpts); */

  //利用循环遍历，看是否都为 true
  //利用arr.every 看是否都满足某个条件

  let arr = [...singleIpts];
  /*   console.log(arr); */

  let flag = arr.every((v) => v.checked == true);
  let allIpt = document.querySelector(".all-ipt");
  allIpt.checked = flag;
}

//全选事件
function allChange() {
  //获取到所有的单选框
  let singleIpts = document.querySelectorAll(".single-ipt");
  let allIpt = document.querySelector(".all-ipt");

  //根据 全选按钮的状态设置的 全部的单选按钮的状态
  singleIpts.forEach((v) => (v.checked = allIpt.checked));

  /*   console.log(222); */
  countFn();
}

//计算总价，封装成一个函数
function countFn() {
  /*   console.log(666); */
  //计算总价
  /*  获取页面所有的 被选中的 单选的input  遍历单选input->
    ipt 的父元素 -所在的li 里面 p  input*/
  //获取到所有的单选框

  let singleIpts = document.querySelectorAll(".single-ipt");
  /*   console.log(singleIpts); */

  //将伪数组转成真数组
  let arr = [...singleIpts];
  /*   console.log(arr); */

  let resArr = arr.filter((v) => v.checked == true);
  console.log(resArr);
  let num = 0;
  resArr.forEach((item) => {
    let ul = item.parentNode.parentNode;
    console.log(ul);
    let pprice = ul.querySelector(".d3 p").innerHTML;
    let pnum = ul.querySelector(".d4 .pnum-ipt").value;
    let count = pprice * pnum;
    num += count;
    // resArr.forEach((ul)=>{
    //   let countSpan=ul.querySelector('.d6 .count-span');
    //   console.log(countSpan);
    // })
  });
  let Gross= document.querySelector(".gross");
  Gross.innerHTML = num;

  

}
